<template>
  <div>
    <div class="top" v-show="sticky">
      电影
      <span @click="gocity">
        {{ abc }}
        <i class="iconfont icon-angle-down"></i>
      </span>
    </div>
    <div class="city" v-show="$store.state.footer">
      <span @click="gocity">
        {{ abc }}
        <i class="iconfont icon-angle-down"></i>
      </span>
    </div>
    <!-- 轮播图 -->
    <div class="lun" v-show="$store.state.footer">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <Header :class="{ sticky }" v-show="$store.state.footer"></Header>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import img1 from '@/assets/1.jpg'
import img2 from '@/assets/2.jpg'
import img3 from '@/assets/3.jpg'
import Vue from 'vue'
import { Lazyload } from 'vant'

Vue.use(Lazyload)
export default {
  data() {
    return {
      sticky: false,
      moren: true,
      images: [img1, img2, img3],
      abc: '北京'
    }
  },
  methods: {
    gocity() {
      this.$router.push('/city')
    }
  },
  components: {
    Header
  },
  mounted() {
    window.addEventListener('scroll', () => {
      const t = document.documentElement.scrollTop || document.body.scrollTop
      if (t >= 220) {
        this.sticky = true
      } else {
        this.sticky = false
      }
    })
  },
  created() {
    if (this.$store.state.city) {
      this.abc = this.$store.state.city
    }
  }
}
</script>

<style lang='scss' scoped>
.lun {
  height: 180px;
  position: relative;
}
.van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 10px;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
    /* height: 150px; */
  }
}
.van-swipe {
  position: static;
}
.top {
  width: 100%;
  height: 44px;
  position: fixed;
  left: 0;
  top: 0;
  font-size: 17px;
  color: #191a1b;
  text-align: center;
  line-height: 44px;
  z-index: 2;
  background-color: #fff;
  span {
    font-size: 12px;
    position: absolute;
    left: 20px;
    top: 0;
    i {
      font-size: 10px;
    }
  }
}
.city {
  span {
    font-size: 12px;
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 2;
    color: white;
    i {
      font-size: 10px;
    }
  }
}
.sticky {
  position: fixed;
  left: 0;
  width: 100%;
  top: 44px;
  z-index: 2;
}
</style>
